<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="../css/conment.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/category.css">
    <link rel="stylesheet" href="../fonts/css/font-awesome.css">
</head>

<body>
    <header>
        <div class="header-one">
            <span><img src="../images/header_logo.png" alt=""></span>
            <span class="clearfix"><a href="javascript:;"><img src="../images/header_app.png" alt=""></i></a></span>
        </div>
        <div>
            <div><input type="text" placeholder="买买买"></div>
            <div><span>搜索</span></div>
        </div>
    </header>
    <!-- 用于撑开头部 -->
    <div class="tmp"></div>

    <!-- 商品分类列表 -->
    <div class="brief">
        <div class="briefin">
        </div>
    </div>

    <footer>
        <div>
            <span>品牌排行</span>
            <span><i class="fa fa-chevron-circle-right" aria-hidden="true"></i></span>
        </div>
        <div>
            <span>登陆</span>
            <span>注册</span>
            <span id="footer-stick"><i class="fa fa-arrow-up" aria-hidden="true"></i>返回顶部</span>
        </div>
        <div>
            <span>手机APP下载</span>
            <span>慢慢卖手机版</span>
            <span>--掌上比价平台</span>
            <span>m.manmanbuy.com</span>
        </div>
    </footer>
</body>

</html>

<script src="../lib/zepto/zepto.js"></script>
<script src="../lib/zepto/event.js"></script>
<script src="../lib/zepto/touch.js"></script>
<script src="../lib/zepto/ajax.js"></script>
<script src="../lib/zepto/fx.js"></script>
<script src="../lib/zepto/fx_methods.js"></script>
<script src="../js/animate.js"></script>
<script src="../js/base.js"></script>
<script src="../lib/template/template.js"></script>
<script src="../lib/jquery/jquery.js"></script>

<script id="categoryTitleTmp" type="text/template">
    {{each result as val key}}
    <div class="fl_t" data-id="{{val.titleId}}">
        <a href="javascript:;">{{val.title}}</a>
        <i class="fa fa-angle-down"></i>
    </div>
    {{/each}}
</script>

<script id="categorylistTmp" type="text/template">
    <div class="fl_all">
        {{each result as val key}}
        <a href="./ct_list.html?categoryid={{val.categoryId}}&&categoryname={{val.category}}">{{val.category}}</a> {{/each}}
    </div>
</script>

<script>
    $(function () {
        $.ajax({
            type: 'get',
            url: 'http://193.112.55.79:9090/api/getcategorytitle',
            dataType: 'json',
            success: function (res) {
                // console.log(res);
                var str = template('categoryTitleTmp', res);
                $('.briefin').html(str);
            }
        });

        var flag = true;
        // 点击分类标题，显示分类项
        $(".briefin").on("tap", ".fl_t", function () {
            // ajax函数里面的$(this)不是外面的this，可以保存一下下面用function，也可以用箭头函数
            var _this = $(this);

            // 判断
            if (flag) {
                // 进行正常的操作
                var titleId = $(this).attr("data-id");
                $.ajax({
                    type: 'get',
                    data: {
                        titleid: titleId
                    },
                    url: 'http://193.112.55.79:9090/api/getcategory',
                    dataType: 'json',
                    // success:function(res)
                    success: (res) => {
                        // console.log(res);

                        var str = template('categorylistTmp', res);
                        // console.log(titleId);
                        // _this.after(str);
                        $(this).after(str);
                    }
                })
            } else {
                $(this).siblings(".fl_all").remove();
            }
            flag = !flag;
        });

        backTop();
        // 鼠标点击后返回到顶部
        function backTop() {
            var stick = document.getElementById("footer-stick");
            stick.onclick = function () {
                //返回到的是顶端
                $('html,body').stop().animate({
                    scrollTop: 0
                });
            }
        }
    })
</script>